<template>
  <div class="center_div">
    <el-alert v-for="item in NotifyList" :key="item.awardrecordid"
              :title="$formatDate(item.time) + ':  ' + item.operation" type="success" center :closable="false"
              style="margin-top: 10px"></el-alert>
    <div class="center_div-container">
      <el-button type="success" @click="AfterNotify()">上一页</el-button>
      <div> 共 {{this.pageNum}} 页， 当前第 {{this.pages}} 页</div>
      <el-button type="primary" @click="NextNotify()">下一页</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "amuse-record",
    data() {
      return{
        NotifyList:  [
          // {msgid: 1, operationid: '111',operation: ' boss  将 李大二 升职为管理员', time: '2020-07-08 11:11:11'},
          // {msgid: 2,operationid: '2',operation: '王小五 创建会议 test1', time: '2020-07-08 11:11:11'},
          // {msgid: 3,operationid: '112',operation: '李大二 批准了 王小五 申请的会议 test1 ', time: '2020-07-08 11:11:11'},
          // {msgid: 4,operationid: '111',operation: '王小五 申请升职', time: '2020-07-08 11:11:11'},
          // {msgid: 5,operationid: '113',operation: 'boss 拒绝了 王小五 的升职请求', time: '2020-07-08 11:11:11'},
          // {msgid: 6,operationid: '4',operation: '李大二 批准了 wangbaba 的注册', time: '2020-07-08 11:11:11'}
        ],
        pages: 1,
        pageNum: 1,
      }
    },
    async created() {
      await this.fetchNotify(this.pages)
    },
    methods: {
      async fetchNotify(pages){
        let {code ,data ,msg} = await this.$post('/personal/notify',{
          data: {pages}
        })
        if(code === 200) {
          this.NotifyList = data.news
          this.pages = data.page
          this.pageNum = data.pagenum
        }else {
          this.$message.error(msg)
        }
      },
      async NextNotify() {
        if (this.pages !==  this.pageNum) {
          await this.fetchNotify(++this.pages)
        }
      },
      async AfterNotify() {
        if (this.pages !== 1) {
          await this.fetchNotify(--this.pages)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .center_div{
    width: 60%;
    margin:0 auto;
    margin-bottom: 50px;

    .center_div-container {
      margin: 0 auto;
      margin-top: 15px;
      width: 350px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }



</style>